<template>
  <div>
    <!-- 添加搜索框 -->
    <div class="serach">
      <!-- 查找名字 -->
      <form-input
        class="searchInput"
        placeholder=" 输入要查找的用户"
        v-model="filterText"
      >
      </form-input>
    </div>
    <!-- 显示用户列表 -->
    <div class="content">
      <el-table
        ref="multipleTable"
        :default-sort="{ prop: 'status', order: 'descending' }"
        :data="
          filtedData.slice(
            (this.currentPage - 1) * this.pagesize,
            this.currentPage * this.pagesize
          )
        "
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="id" label="ID" width="120"> </el-table-column>
        <el-table-column
          prop="username"
          label="姓名"
          width="120"
          @click="detaileInformation"
        >
        </el-table-column>
        <el-table-column label="性别" width="200">
          <template slot-scope="scope">
            <span v-if="scope.row.sex === 'female'">女</span>
            <span v-else-if="scope.row.sex === 'male'">男</span>
          </template>
        </el-table-column>
        <el-table-column label="分配状态" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.subjectId !== ''" style="color: green"
              >已分配</span
            >
            <span v-if="scope.row.subjectId === ''" style="color: red"
              >未分配</span
            >
          </template>
        </el-table-column>

        <el-table-column prop="subjectId" label="学习方向" width="200">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="medium"
              class="el-icon-unlock"
              @click="hActive(scope.$index, scope.row),open()"
              ></el-button
            >
            <el-button
              type="text"
              size="medium"
              class="el-icon-document"
              @click="detaileInformation(scope.$index, scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 用户详细信息表单 -->
    <div class="informate" v-show="formShow">
      <div class="InformationForm">
        <i class="el-icon-close" id="close" @click="close()"></i>
        <el-descriptions title="用户详细信息">
          <el-descriptions-item label="id">{{
            detailInfor.id
          }}</el-descriptions-item>
          <el-descriptions-item label="名称">{{
            detailInfor.username
          }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{
            detailInfor.sex
          }}</el-descriptions-item>
          <el-descriptions-item label="生日">{{
            detailInfor.birthday
          }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{
            detailInfor.telephone
          }}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{
            detailInfor.email
          }}</el-descriptions-item>
          <el-descriptions-item label="部门">{{
            detailInfor.department
          }}</el-descriptions-item>
          <el-descriptions-item label="学校">
            <el-tag size="small">{{ detailInfor.college }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="专业">{{
            detailInfor.major
          }}</el-descriptions-item>
          <el-descriptions-item label="学科">{{
            detailInfor.subjectId
          }}</el-descriptions-item>
          <el-descriptions-item label="积分">{{
            detailInfor.point
          }}</el-descriptions-item>
          <el-descriptions-item label="权限">{{
            detailInfor.privilege
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <div class="pages">
      <!-- 动态添加页码 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="userData.length"
        :page-size="pagesize"
        :pager-count="5"
        :current-page="currentPage"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  AllUsersAPI,
  ActiveUserAPI,
  SearchAllSubjectAPI
} from "@/api/utils";
export default {
  inject: ["reload"],
  data() {
    return {
      // 查找的用户
      filterText: "",
      userData: [],
      currentPage: 1, // 当前的页数
      pagesize: 9, // 一页的数据量
      formShow: false,
      detailInfor: [],
    };
  },
  computed: {
    filtedData() {
      return this.userData.filter((item) => {
        var reg = new RegExp(this.filterText, "i");
        return !this.filterText || reg.test(item.username);
      });
    },
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    close() {
      this.formShow = false;
    },
    detaileInformation(index, row) {
      this.formShow = true;
      this.detailInfor = row;
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage = val;
    },
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.pagesize = val;
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1;
    },
    // 学科名
    subjectName(code) {
      // 传过来的是数字 -1为索引 通过索引返回值
      // let arr = this.subjects;
      // if (code) {
      let num = code - 1;
      // console.log(this.subjects);
      return this.subjects[num];
    },
    //获取列表
    async getList() {
      return AllUsersAPI().then(res=>{
        if(res.data.flag){
          let user = res.data.data;
            this.allDatabase = user
            user.forEach((e) => {
              if (e.status == 1) {
                this.userData.push(e);
              }
            });
            this.userData.forEach((item) => {
              // item.status = this.statuName(item.status);
              item.subjectId = this.subjectName(item.subjectId);
            });
        }else{
          this.$message.error("获取数据失败！")
        }
      })
    },
    // 激活判断
    open() {
      this.$confirm("确认激活该用户吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.handleActive();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消激活",
          });
          this.reload();
        });
    },
    // 获取激活 id 
    hActive(index,row){
        this.id = row.id
    },
    // 用户激活
    async handleActive(){
       return ActiveUserAPI(this.id).then(res=>{
         if (res.data.flag) {
            this.reload();
            this.$message.success("激活成功！")
          } else {
            this.$message.error("激活失败！")
          }
       })
    },
  },
  async mounted(){
      const res = await SearchAllSubjectAPI()
      if (res.data.flag) {
        let list = res.data.data;
        this.subjectDate = list;
        this.subjects = [];
        this.subjectDate.forEach((item) => {
          if (item.name) {
            this.subjects.push(item.name);
            // console.log(item.name);
          }
        });
        this.getList();
      }
  }
};
</script>

<style scoped>
.content {
  margin-top: 20px;
}
.el-table /deep/ th,
.el-table /deep/ td {
  padding: 7px 4px;
  text-align: center;
}

.editBackground {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 98;
  background-color: rgba(0, 0, 0, 0.5);
}

.footbtn {
  margin-top: 40px;
}
.pages {
  position: absolute;
  left: 50%;
  bottom: 50px;
}
/* 详细信息表单 */
.InformationForm {
  overflow: hidden;
  position: absolute;
  width: 680px;
  height: 200px;
  /* background-color:rgba(212, 241, 248, 1); */
  background: linear-gradient(#a7deeb 0%, #d2d5d6 100%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  box-shadow: 0px 0px 10px rgba(109, 113, 114, 0.5);
}
.InformationForm /deep/ .el-descriptions__body {
  background-color: transparent;
}
.informate {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 720px;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10;
}
#close {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 20px;
  cursor: pointer;
  color: #ccc;
}
.content /deep/.el-table tr,
.content /deep/.el-table th.el-table__cell,
.content /deep/.el-table {
  background-color: rgba(255, 255, 255, 0.3);
}
</style>